<template>
  <!-- 图片/视频详情 -->
  <div class="proVideoDetail">
    <div
      class="image-detail"
      v-if="proItem.connectionType === 2"
      :style="{ backgroundImage: `url('${imageUrl}')` }"
    >
      <!-- <img :src="imageUrl" alt=" " /> -->
    </div>
    <div class="video-detail" v-else>
      <d-player ref="player" class="video" :options="videoOptions"></d-player>
    </div>
  </div>
</template>

<script>
import VueDPlayer from "vue-dplayer";
export default {
  components: {
    "d-player": VueDPlayer,
  },
  props: {
    proItem: {
      type: Object,
    },
  },
  data() {
    return {
      videoOptions: {
        container: document.getElementById("dplayer"), //播放器容器
        mutex: false, //  防止同时播放多个用户，在该用户开始播放时暂停其他用户
        theme: "#b7daff", // 风格颜色，例如播放条，音量条的颜色
        loop: false, // 是否自动循环
        lang: "zh-cn", // 语言，'en', 'zh-cn', 'zh-tw'
        screenshot: true, // 是否允许截图（按钮），点击可以自动将截图下载到本地
        hotkey: true, // 是否支持热键，调节音量，播放，暂停等
        preload: "auto", // 自动预加载
        volume: 0.7, // 初始化音量
        playbackSpeed: [0.5, 0.75, 1, 1.25, 1.5, 2, 3], //可选的播放速度，可自定义
        // logo:
        //   "https://qczh-1252727916.cos.ap-nanjing.myqcloud.com/pic/273658f508d04d488414fd2b84c9f923.png", // 在视频左上角上打一个logo
        video: {},
      },
      player: null,
      imageUrl: "",
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.init();
    });
  },
  watch: {
    deep: true,
    proItem(newValue) {
      console.log(newValue);
      this.playURL();
    },
  },
  methods: {
    // 初始化视频播放器
    init() {
      // 传过来的数据是视频数据时执行下列参数
      if (this.proItem.connectionType === 3) {
        this.player = this.$refs.player.dp;
        if (this.player) {
          document.querySelector(".dplayer-menu").remove(); //隐藏右键菜单
          document.querySelector(".dplayer-mask").remove();
        }
      }
      this.playURL();
    },
    // 播放
    playURL() {
      if (this.proItem.connectionType === 3) {
        this.player.switchVideo({
          url: window.VUE_APP_BASE_URL + "/" + this.proItem.fileUrl,
        });
      } else {
        this.imageUrl = window.VUE_APP_BASE_URL + "/" + this.proItem.fileUrl;
        // tif 转 png
        if (this.imageUrl.toLowerCase().indexOf(".tif") != -1) {
          this.imageUrl = this.imageUrl
            .split("")
            .reverse()
            .join("")
            .replace(/fit./, "gnp.")
            .split("")
            .reverse()
            .join("");
        }
      }
    },
  },
};
</script>

<style lang="scss">
.proVideoDetail {
  width: 100%;
  height: 100%;
  // overflow: auto;
  .image-detail {
    width: 100%;
    height: 100%;
    // height: 6rem;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
  }
  .video-detail {
    width: 100%;
    height: 100%;
    .video {
      width: 100%;
      height: 100%;
    }
  }
  ::v-deep .dplayer-logo {
    display: none !important;
  }
}
</style>